<template>
  <div>
    <todeHeader @send="add"></todeHeader>
    <div v-if="newList.length<=0" >
      <todeMain @type="typeFn" v-for="(item,index) in list" :key="index" :id="item.id" :username="item.name" :boole="item.isDone" :index="index" @remove="removeFn"></todeMain>
    </div>
    <div v-if="newList.length>0">
    <todeMain @type="typeFn" v-for="(item,index) in newList" :key="index" :id="item.id" :username="item.name" :boole="item.isDone" :index="index" @remove="removeFn"></todeMain>
    </div>
    <todeFlooter @flooter="fn" @clear="removeAll" :list="this.newList.length>0?this.newList:this.list"></todeFlooter>
  </div>
</template>

<script>
import todeHeader from '@/components/todeHeader'
import todeMain from '@/components/todeMain'
import todeFlooter from '@/components/todeFlooter'
import "../styles/base.css"
import "../styles/index.css"
export default {
  data(){
    return{
      list: [
              { id: 100, name: "吃饭", isDone: true },
              { id: 102, name: "睡觉", isDone: false },
              { id: 103, name: "打豆豆", isDone: true },
            ],
      newList:[],
      mainFlag:"",
      flooterFlag:'all'
    }
  },
  components:{
  todeHeader,
  todeMain,
  todeFlooter
  },
  methods:{
    //增加
    add(val,flag){
      this.mainFlag=flag
      if(this.flooterFlag=="all"){
        this.list.push({
        id:this.list.length>0?this.list[this.list.length-1].id+1:100,
        name:val,
        isDone:this.mainFlag
        })
      }else{
        this.newList.push({
        id:this.newList.length>0?this.newList[this.newList.length-1].id+1:100,
        name:val,
        isDone:this.mainFlag
        })
        this.list.push({
        id:this.list.length>0?this.list[this.list.length-1].id+1:100,
        name:val,
        isDone:this.mainFlag
        })
      }
      
        // console.log(this.list)
    },
    //删除
    removeFn(index){
      if(this.flooterFlag=="all"){
        this.list.splice(index,1)
      }else{
        this.list.splice(this.list.indexOf(this.list[index]),1)
        this.newList.splice(index,1)
      }
      
    },
    // 切换显示
    fn(val){
      this.flooterFlag=val
      console.log(val)
      if(this.flooterFlag=="unfinished"){
        this.newList=[]
        this.newList= this.list.filter(item=>item.isDone==false)
      }else if(this.flooterFlag=="finished"){
        this.newList=[]
        this.newList= this.list.filter(item=>item.isDone==true)
      }else{
        this.newList= this.list
      }
    },
    //删除已完成
    removeAll(){
      if(this.flooterFlag=="all"){
            this.list=this.list.filter(item=>item.isDone==false)
      }else{
        this.list=this.list.filter(item=>item.isDone==false)
        this.newList=this.newList.filter(item=>item.isDone==false)
      }
    },
    typeFn(val,index){
      if(this.flooterFlag=="all"){
        this.list[index].id=val
      }else{
        this.list[index].id=val
        this.newList[index].id=val
      }
    }
  }
}
</script>

<style>

</style>